@import '../../style/core';
@import '../../style/themes/default.scss';

$btn-padding: (
    xs: getUnit(2),
    sm: getUnit(3),
    md: getUnit(4),
    lg: getUnit(5),
);
$btn-min-width: (
    xs: getUnit(16),
    sm: getUnit(18),
    md: getUnit(22),
    lg: getUnit(26),
);

// $btn-type: (
//     // 'normal': (), 'primary': (), 'ghost': (), 'dashed': (), 'text' (), 'link'
// );

$shape-list: (
    normal: getUnit(1),
    circle: 50%,
    round:  getUnit(6)
) !default;

$btn-color: (
    // normal: $btn-color-normal
    normal: (
        // 字体颜色                border 边框颜色                   背景颜色
        color: #333,            borderColor: #e0e0e0,             bgColor: #fff,
        hoverColor: #666,       hoverBorderColor: #e0e0e0,        hoverBgColor: #f5f5f5,
        activeColor: #000,      activeBorderColor: #e0e0e0,       activeBgColor: #eee,
        disabledColor: #ccc,    disabledBorderColor: #e0e0e0,     disabledBgColor: #fafafa,

        ghostHoverBgColor: #ccc, ghostActiveBgColor: #d0f2d5,  ghostDisabledColor: #ccc
        ),
    error: (
        // 字体颜色                border 边框颜色                   背景颜色
        color: #fff,            borderColor: #f56c6c,             bgColor: #f56c6c,
        hoverColor: #fff,       hoverBorderColor: #f78989,           hoverBgColor: #f78989,
        activeColor: #fff,      activeBorderColor: #dd6161,          activeBgColor: #dd6161,
        disabledColor: #fff,    disabledBorderColor: #fab6b6,        disabledBgColor: #fab6b6,

        ghostHoverBgColor: #fff2f2, ghostActiveBgColor: #ffdbdc, ghostDisabledColor: #ccc
        

        ),

    primary: (
        // 字体颜色                border 边框颜色                   背景颜色
        color: #fff,            borderColor: #4c84ff,             bgColor: #4c84ff,
        hoverColor: #fff,       hoverBorderColor: #709bff,           hoverBgColor: #709bff,
        activeColor: #fff,      activeBorderColor: #366cd9,          activeBgColor: #366cd9,
        disabledColor: #fff,    disabledBorderColor: #709bff,  disabledBgColor: #709bff,

        ghostHoverBgColor: #fff2f2, ghostActiveBgColor: #ffdbdc, ghostDisabledColor: #ccc
        

    ),
    success: (
        // 字体颜色                border 边框颜色                   背景颜色
        color: #fff,            borderColor: #67c23a,             bgColor: #67c23a,
        hoverColor: #fff,       hoverBorderColor: #85ce61,           hoverBgColor: #85ce61,
        activeColor: #fff,      activeBorderColor: #5daf34,          activeBgColor: #5daf34,
        disabledColor: #fff,    disabledBorderColor: #b3e19d,        disabledBgColor: #b3e19d,

        ghostHoverBgColor: #fff2f2,  ghostActiveBgColor: #d0f2d5,  ghostDisabledColor: #f2fff4


        ),
    warning: (
        // 字体颜色                border 边框颜色                   背景颜色
        color: #fff,            borderColor: #e6a23c,             bgColor: #e6a23c,
        hoverColor: #fff,       hoverBorderColor: #ebb563,           hoverBgColor: #ebb563,
        activeColor: #fff,      activeBorderColor: #cf9236,          activeBgColor: #cf9236,
        disabledColor: #fff,    disabledBorderColor: #f3d19e,        disabledBgColor: #f3d19e,

        ghostHoverBgColor: #ccc, ghostActiveBgColor: #d0f2d5, ghostDisabledColor: #ccc
        ),
);

@mixin fontColor(
    $color, $hoverColor, $activeColor, $disabledColor) {
    color: $color;
    &:hover {
        color: $hoverColor;
    }
    &:active {
        color: $activeColor;
    }
    &:disabled {
        color: $disabledColor;
    }
}

@mixin bgColor(
    $color, $hoverColor, $activeColor, $disabledColor) {
    background-color: $color;
    &:hover {
        background-color: $hoverColor;
    }
    &:active {
        background-color: $activeColor;
    }
    &:disabled {
        background-color: $disabledColor;
    }
}

// 绘制button 颜色
@mixin drawBtnColor ($colors, $key) {

    $color: map-get($colors, color);
    $borderColor: map-get($colors, borderColor);
    $bgColor: map-get($colors, bgColor); 
    
    // hover
    $hoverColor: map-get($colors, hoverColor);
    $hoverBorderColor: map-get($colors, hoverBorderColor);
    $hoverBgColor: map-get($colors, hoverBgColor);
    
    // active
    $activeColor: map-get($colors, activeColor);
    $activeBorderColor: map-get($colors, activeBorderColor);
    $activeBgColor: map-get($colors, activeBgColor);
    
    // disabled
    $disabledColor: map-get($colors, disabledColor);
    $disabledBorderColor: map-get($colors, disabledBorderColor);
    $disabledBgColor: map-get($colors, disabledBgColor);


    $ghostHoverBgColor: map-get($colors, ghostHoverBgColor);
    $ghostActiveBgColor: map-get($colors, ghostActiveBgColor);
    $ghostDisabledColor: map-get($colors, ghostDisabledColor);



        color: $color;
        border-color: $borderColor;
        background-color: $bgColor;

        &:hover {
            color: $hoverColor;
            border-color: $hoverBorderColor;
            background-color: $hoverBgColor;
        }

        &:active {
            color: $activeColor;
            border-color: $activeBorderColor;
            background-color: $activeBgColor;
        }
 
        &:disabled {
            cursor: not-allowed;
            color: $disabledColor;
            border-color: $disabledBorderColor;
            background-color: $disabledBgColor;
        }


        &.#{$prefixCls}-btn-type-dashed {
            border-style: dashed;
            background: none;
            @include fontColor($bgColor, $hoverBgColor, $activeBgColor, $disabledBgColor);
        }

        &.#{$prefixCls}-btn-type-ghost {
            background: none;
            @include fontColor($bgColor, $hoverBgColor, $activeBgColor, $disabledBgColor);
            @include bgColor(transparent, $ghostHoverBgColor, $ghostHoverBgColor, $ghostDisabledColor);
        }


        &.#{$prefixCls}-btn-type-link,
        &.#{$prefixCls}-btn-type-text {
            background: none;
            border: none;
            @include fontColor($bgColor, $hoverBgColor, $activeBgColor, $disabledBgColor);
        }

        &.#{$prefixCls}-btn-type-link {
            text-decoration: dashed;
            &:hover {
                text-decoration: underline;
            }
        }

        &.#{$prefixCls}-btn-color-normal {
            $normal: map-get($btn-color, normal);
            $normalColor: map-get( $normal, color);
            $normalHoverColor: map-get( $normal, hoverColor);
            $normalActiveColor: map-get( $normal, activeColor);
            $normalDisabledColor: map-get( $normal, disabledColor);
            @include fontColor($normalColor, $normalHoverColor, $normalActiveColor, $normalDisabledColor);
        }
    
    
}


.#{$prefixCls}-btn {
    @include reset();

    display: inline-block;
    cursor: pointer;
    outline: none;
    white-space: nowrap;
    border: 1px solid #ccc;
    text-align: center;

    // size
    @each $size in $size-list {
        $height: map-get($btn-height, $size);
        $font-size-by-size: map-get($font-size, $size);

        &-size-#{$size} {
            font-size: $font-size-by-size;
            height: $height;
            line-height: $height;
            padding: 0 map-get($btn-padding, $size);
            min-width: map-get($btn-min-width, $size);

            &.#{$prefixCls}-btn-shape-circle {
                width: $height;
            }
        }
        
    }

    // color
    @each $key, $colors in $btn-color {
        &-color-#{$key} {
            @debug "#{$btn-color}, $btn-color";
            @include drawBtnColor(map-get($btn-color, $key), $key);
        }
    }

    // shape
    @each $key, $shape in $shape-list {
        &-shape-#{$key} {

            @if $key == 'circle' {
                min-width: auto;
            }
            border-radius: map-get($shape-list, $key);
        }
    }

    & + & {
        margin-left: 14px;
    }

    .animation {
        transition: color .2s ease-in;
    }
}